<template>
  <div class="video-message">
    <div class="video-name">{{ message.title }}</div>
    <div class="play-message">
      <div class="icon-wrap play-count">
        <span class="iconfont icon-bofangliang"></span>
        <div>{{ message.playCount }} 播放</div>
      </div>
      <!-- <div class="icon-wrap cur-person">
        <span class="iconfont icon-guankanrenshu"></span>
        <div>2024 人正在观看</div>
      </div> -->
    </div>
    <div class="video-introduction">
      <van-text-ellipsis rows="3" :content="message.intro" expand-text="展开" collapse-text="收起" />
    </div>
    <div class="video-tags">
      <div class="tag-item" v-for="tab in message.videoLabelList" :key="tab">{{ tab }}</div>
    </div>
    <div class="user-feedback">
      <div class="item dianzan_kuai">
        <div :class="['iconfont icon-dianzan_kuai', dianzhanIsActive ? 'active' : '']" @click="handleDianZhan"></div>
        <div class="text">{{ videoData.goodCount }}</div>
      </div>
      <div class="item shoucang">
        <div :class="['iconfont icon-shoucang', collectIsActive ? 'active' : '']" @click="handleShoucang"></div>
        <div class="text">{{ videoData.collectCount }}</div>
      </div>
      <WeChatShare :message="message" class="item fenxiang" :active="fenxiangIsActive" :baseUrl="baseUrl"
        @change-active="handleChangeActive"></WeChatShare>
    </div>
    <UserToast :loading="showTosat" :icon="toastIcon" :text="toastText" :delay="1000" @close="closeToast"></UserToast>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getVideoMessage, videoLike, cancelVideoLike, getVideoLikeList, videoCollect, cancelVideoCollect, getVideoLikeCollect } from '@/api/videoPlay.js';
import { useRoute, useRouter } from "vue-router";

const props = defineProps({
  message: { type: Object, default: () => ({}) },
  baseUrl: { type: String, default: '' }
})

const showTosat = ref(false);
const toastIcon = ref('');
const toastText = ref('');

//  关闭弹窗
const closeToast = () => {
  showTosat.value = false;
}
//  打开弹窗
const openToast = () => {
  showTosat.value = true;
}


const route = useRoute();
const videoId = route.params.videoId; //  记录视频的 id
const parentId = JSON.parse(localStorage.getItem('parentId'));  //  记录 parentId



const dianzhanIsActive = ref(false);
//   判断该视频是否被点赞
const isVideoLike = async () => {
  //  已经点赞的列表
  let videoLikeList = [];
  const { code, data } = await getVideoLikeList({
    currentPage: 1,
    pageSize: 200000,
    parentId,
    goodType: "01",
    goodContentId: videoId
  });
  if (code === 200) {
    videoLikeList = data.list;
  }

  //  判断数组中有没有该数据
  return videoLikeList.some(_s => _s.goodContentId === videoId);
}


const videoData = ref({});
async function setVideoData() {
  const id = route.params.videoId || '';
  const { code, data } = await getVideoMessage(id);
  if(code === 200) {
    try {
      data.videoFile = JSON.parse(data.videoFile);
      data.fileId = data.videoFile[0].fileId;
      data.videoSource = process.env.VUE_APP_API_BASE_URL + '/spgl/SpdbVideo/getVideo?fileId=' + (data.fileId || '');
      // data.videoSource = 'api/spgl/SpdbVideo/getVideo?fileId=20240425_553135991724974021.mp4'
    } catch(ev) {
      data.videoSource = '';
    }

    //  处理图片
    try {
      data.videoPic = JSON.parse(data.videoPic);
      data.image = data.videoPic[0].url ? process.env.VITE_API_API_IMAGE_URL + data.videoPic[0].url : '';
    } catch(ev) {
      data.image = '';
    }

    try { data.videoLabelList = JSON.parse(data.videoLabelList) } catch(ev) { data.videoLabelList = [] }

    videoData.value = data;
  }
}

//   用户点赞
const handleVideoLike = async () => {
  const { code, msg } = await videoLike({
    goodType: "01",
    goodContentId: videoId,
    parentId: parentId
  });
  if (code === 200) {
    toastIcon.value = 'icon-chenggong';
    toastText.value = '点赞成功';
    setVideoData()
    dianzhanIsActive.value = true;
  } else {
    toastIcon.value = 'icon-71shibai';
    toastText.value = '点赞失败';
  }

  openToast();
}

//  用户取消点赞
const handleCancelVideoLike = async () => {
  const { code, msg } = await cancelVideoLike({
    goodType: "01",
    goodContentId: videoId,
    parentId: parentId
  });

  if (code === 200) {
    toastIcon.value = 'icon-chenggong';
    toastText.value = '取消点赞成功';
    setVideoData()
    dianzhanIsActive.value = false;
  } else {
    toastIcon.value = 'icon-71shibai';
    toastText.value = '取消点赞失败';
  }

  openToast();
}

//  点赞
const handleDianZhan = async () => {
  //  判断是否被点赞了
  dianzhanIsActive.value = await isVideoLike();
  //  当前已被点赞
  if (dianzhanIsActive.value) {
    await handleCancelVideoLike()
  } else {
    await handleVideoLike();
  }
}



//  收藏
const collectIsActive = ref(false);  //  收藏

//   判断该视频是否被收藏
const isVideoCollect = async () => {
  //  已经收藏的列表
  let videoLikeList = [];
  const { code, data } = await getVideoLikeCollect({
    currentPage: 1,
    pageSize: 200000,
    parentId,
    collectType: "01",
    collectContentId: videoId
  });
  if (code === 200) {
    videoLikeList = data.list;
  }

  //  判断数组中有没有该数据
  return videoLikeList.some(_s => _s.collectContentId === videoId);
}

//   用户收藏
const handleVideoCollect = async () => {
  const { code, msg } = await videoCollect({
    collectType: "01",
    collectContentId: videoId,
    parentId: parentId
  });
  if (code === 200) {
    toastIcon.value = 'icon-chenggong';
    toastText.value = '收藏成功';
    setVideoData()
    collectIsActive.value = true;
  } else {
    toastIcon.value = 'icon-71shibai';
    toastText.value = '收藏失败';
  }

  openToast();
}

//  用户取消收藏
const handleCancelVideoCollect = async () => {
  const { code, msg } = await cancelVideoCollect({
    collectType: "01",
    collectContentId: videoId,
    parentId: parentId
  });

  if (code === 200) {
    toastIcon.value = 'icon-chenggong';
    toastText.value = '取消收藏成功';
    setVideoData()
    collectIsActive.value = false;
  } else {
    toastIcon.value = 'icon-71shibai';
    toastText.value = '取消收藏失败';
  }

  openToast();
}

//  收藏
const handleShoucang = async () => {
  //  判断是否被点赞了
  collectIsActive.value = await isVideoCollect();
  //  当前已被点赞
  if (collectIsActive.value) {
    await handleCancelVideoCollect()
  } else {
    await handleVideoCollect();
  }
}

onMounted(async () => {
  dianzhanIsActive.value = await isVideoLike();
  collectIsActive.value = await isVideoCollect();
  setVideoData()

})


//  分享
const fenxiangIsActive = ref(false);  //  分享
const handleChangeActive = () => {
  fenxiangIsActive.value = !fenxiangIsActive.value;
}
</script>

<style lang="scss" scoped>
.video-message {
  padding: 1rem;
  box-sizing: border-box;

  .video-name {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }

  .play-message {
    display: flex;
    align-items: center;
    color: #777;
    font-size: 1.2rem;

    .icon-wrap {
      display: flex;
      align-items: center;
      margin-right: .8rem;

      .icon-guankanrenshu {
        padding-right: .4rem;
        font-size: 1rem;
        color: #777;
      }

      .icon-bofangliang {
        padding-right: .4rem;
        font-size: 1.4rem;
        color: #777;
      }
    }
  }

  .video-introduction {
    margin-top: 1rem;
    font-size: 1.2rem;
  }

  .video-tags {
    display: flex;
    flex-wrap: wrap;
    margin-top: .2rem;

    .tag-item {
      padding: 0 1rem;
      margin: 0 1.6rem 1rem 0;
      height: 2.6rem;
      line-height: 2.6rem;
      border-radius: 1rem;
      box-sizing: border-box;
      font-size: 1.2rem;
      color: #aaa;
      border: .01rem solid #aaa;
    }
  }

  .user-feedback {
    display: flex;

    .item {
      text-align: center;
      color: #777;
      margin-right: 2.4rem;
      font-size: 1.4rem;

      .iconfont {
        font-size: 1.6rem;

        &.active {
          color: red;
        }
      }
    }
  }
}
</style>
